<template>
  <div class="register_index" :class="{ delayreg: isDelayApply }">
    <div class="content inner">
      <div class="register-box">
        <div class="hd">
          <h3 class="title" v-if="isDelayApply">
            延缓入学注册<span>（仅本市户口适龄儿童可进行申请！）</span>
          </h3>
          <h3 class="title" v-else>用户注册</h3>
          <div class="login-hd-fr">
            已有账号，<router-link :to="{ path: '/zmkm' }"
              >马上登录</router-link
            >
          </div>
        </div>
        <div class="bd fn-clearfix">
          <div class="register">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="130px"
              class="demo-ruleForm"
            >
              <!-- 是否有户口 -->
              <el-form-item
                label="是否有户口："
                class="title-top"
                prop="ogState"
                v-if="!isDelayApply"
              >
                <el-radio-group
                  v-model="ruleForm.ogState"
                  @change="changeNoOrig"
                >
                  <el-radio label="1">有户口</el-radio>
                  <el-radio label="0">无户口</el-radio>
                  <p class="el-form-infos" style="padding-bottom: 0">
                    如果孩子未办理户口，入学类型请按家长的户口选择，如果已经办理，请不要勾选无户口。
                  </p>
                </el-radio-group>
              </el-form-item>
              <!-- 入学类型 -->
              <el-form-item
                label="入学类型："
                prop="regType"
                class="title-top"
                v-if="!isDelayApply"
              >
                <el-radio-group
                  v-model="ruleForm.regType"
                  @change="changeRegType"
                >
                  <el-row
                    class="reg-row"
                    v-for="item in regTypesArray"
                    :key="item.id"
                    ><el-radio :label="item.code">{{ item.text }}</el-radio>
                    <p class="el-form-infos">
                      {{ item.remark }}
                    </p></el-row
                  >
                </el-radio-group>
              </el-form-item>
              <!-- 入学学生姓名 -->
              <el-form-item
                v-if="ruleForm.ogState != '0'"
                :label="isDelayApply ? '学生姓名：' : '入学学生姓名：'"
                prop="name"
                :class="{ delayname: isDelayApply }"
              >
                <el-input
                  v-model.trim="ruleForm.name"
                  placeholder="请输入姓名"
                  style="width: 356px"
                ></el-input>
              </el-form-item>
              <el-row v-if="ruleForm.ogState == '0'">
                <el-col :span="12"
                  ><el-form-item label="入学学生姓名：" prop="name">
                    <el-input
                      v-model.trim="ruleForm.name"
                      placeholder="请输入姓名"
                    ></el-input> </el-form-item
                ></el-col>
                <el-col :span="12"
                  ><el-form-item
                    label="手机号："
                    prop="phone"
                    :class="{ itemtel: !isShowPhoneError }"
                  >
                    <el-input
                      v-model.trim="ruleForm.phone"
                      placeholder="请输入手机号"
                      @blur="showPhoneError"
                    ></el-input>
                    <p class="el-form-tips" v-if="isShowPhoneError">
                      接收短信使用,请勿使用199，166等新号段的号码，无法发送短信
                    </p>
                  </el-form-item></el-col
                >
              </el-row>
              <!-- 身份证 手机号 -->
              <el-row v-if="ruleForm.ogState != '0'">
                <el-col :span="12" v-if="ruleForm.ogState != '0'">
                  <el-form-item
                    :label="
                      ruleForm.regType == 'reg10' ? '证件号：' : '身份证号：'
                    "
                    prop="idNo"
                  >
                    <el-input
                      v-model.trim="ruleForm.idNo"
                      :placeholder="
                        ruleForm.regType == 'reg10'
                          ? '请输入证件号'
                          : '请输入身份证号'
                      "
                      @blur="idChange"
                    ></el-input> </el-form-item
                ></el-col>
                <el-col :span="12">
                  <el-form-item
                    label="手机号："
                    prop="phone"
                    :class="{ itemtel: !isShowPhoneError }"
                  >
                    <el-input
                      v-model.trim="ruleForm.phone"
                      placeholder="请输入手机号"
                      @blur="showPhoneError"
                    ></el-input>
                    <p class="el-form-tips" v-if="isShowPhoneError">
                      接收短信使用,请勿使用199，166等新号段的号码，无法发送短信
                    </p>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 性别 密码 -->
              <el-row>
                <el-col :span="12">
                  <el-form-item label="性别：" prop="gender">
                    <el-select
                      v-model="ruleForm.gender"
                      placeholder="请选择性别"
                      style="width: 100%"
                      :disabled="idCheck"
                    >
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="密码："
                    prop="pwd"
                    :class="{ itemtel: !isShowPwdError }"
                  >
                    <el-input
                      v-model.trim="ruleForm.pwd"
                      placeholder="请输入密码"
                      show-password
                      @blur="showPwdError"
                    ></el-input>
                    <p class="el-form-tips" v-if="isShowPwdError">
                      密码由6-20位数字或字母或特殊字符中的两种组成
                    </p>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 出生日期 确认密码 -->
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="出生日期："
                    required
                    prop="birth"
                    :class="{ itemtel: !isShowBirthError }"
                  >
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.birth"
                      style="width: 100%"
                      :disabled="idCheck"
                      @blur="showBirthError"
                    ></el-date-picker>
                    <p class="el-form-tips" v-if="isShowBirthError">
                      要求日期在[{{ ruleForm.BirthBegin }}]和[{{
                        ruleForm.BirthEnd
                      }}]之间
                    </p>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="确认密码：" prop="repPwd">
                    <el-input
                      v-model.trim="ruleForm.repPwd"
                      placeholder="确认密码"
                      show-password
                    ></el-input> </el-form-item
                ></el-col>
              </el-row>

              <el-row class="promise">
                <el-form-item label="承诺条款：">
                  <div class="pro_item" v-if="isDelayApply">
                    <p
                      class="el-form-infos"
                      style="padding: 0; margin-top: 1px"
                    >
                      我确认以上信息准确无误，自愿申请延缓入学，如有虚假，愿意承担相关法律责任。
                    </p>
                  </div>
                  <div class="pro_item" v-else>
                    <p class="el-form-infos" style="padding: 0">
                      （1）我符合现在选择的入学类型。
                    </p>
                    <p class="el-form-infos" style="padding: 0">
                      （2）在库尔勒市有合法稳定住所，工作生活。
                    </p>
                    <p class="el-form-infos" style="padding: 0">
                      （3）我提供的信息真实有效，如有虚假愿意承担后果，包括法律责任。
                    </p>
                    <p class="el-form-infos" style="padding: 0">
                      （4）报名时愿意提供真实图片资料，并且服从系统审核、派位结果。
                    </p>
                  </div>
                  <el-checkbox v-model="checkAgree"
                    >我承诺自觉履行以上条款，并且已阅读和同意
                    <router-link
                      class="privacy"
                      :to="{
                        path: '/privacy',
                        query: { isPrivacy: 'agreement' },
                      }"
                      target="_blank"
                      >《用户服务协议》</router-link
                    >,
                    <router-link
                      class="privacy"
                      :to="{ path: '/privacy', query: { isPrivacy: 'police' } }"
                      target="_blank"
                      >《隐私政策》</router-link
                    ></el-checkbox
                  >
                </el-form-item>
              </el-row>
              <el-form-item class="submit_btn">
                <el-button
                  type="primary"
                  @click="submitForm('ruleForm')"
                  style="width: 100%"
                  :class="{ disabled: !checkAgree }"
                  :disabled="!checkAgree"
                  >提交注册</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div class="code_mask" v-if="dialogGoLogin" @click="handleGoLogin"></div>
      <!-- 去登录弹框 -->
      <div class="provite_policy wid" v-if="dialogGoLogin">
        <div class="title">
          <h3>提示</h3>
        </div>
        <div class="goLogin_content">
          <div class="text">
            <i class="el-icon-check"></i>
            <p>
              注册成功，请用身份证号<span>{{ idno }}</span
              >【去登录】继续填写报名信息
            </p>
          </div>
          <div class="agree_btn">
            <el-button type="primary" size="mini" @click="goLogin"
              >去登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAnalysisIdCard } from "../utils/util";
//import { setTimeout } from 'timers';
import localDb from "../utils/localDb";
import { formatDate } from "../utils/util";
import {
  getSysZt,
  getSysPara,
  getSysCode,
  studDelayReg,
  studReg,
} from "../utils/api";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        ogState: "1",
        regType: "",
        name: "",
        idNo: "",
        gender: "",
        birth: "",
        phone: "",
        pwd: "",
        repPwd: "",
        BirthBegin: "", //最早出生日期
        BirthEnd: "", //最晚出生日期
      },
      regTypesArr: [],
      checkAgree: false,
      idCheck: true,
      rules: {
        ogState: [{ required: true, message: "请选择户口", trigger: "change" }],
        regType: [
          { required: true, message: "请选择入学类型", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        idNo: [
          { required: true, message: "请输入身份证号/证件号", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "您的身份证格式不正确",
          },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        birth: [
          {
            // type: "date",
            required: true,
            message: "请选择日期",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (
                /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,20}$/.test(
                  value
                ) == false
              ) {
                callback(new Error("您的密码格式不正确"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        repPwd: [
          {
            required: true,
            validator: validatePass,
            trigger: "blur",
          },
        ],
      },
      dialogGoLogin: false,
      idno: "",
      isShowPhoneError: true,
      isShowPwdError: true,
      isShowBirthError: true,
    };
  },
  methods: {
    async getRegType(type) {
      try {
        const data = await getSysCode(type);
        if (data.res == 0) {
          this.regTypesArr = data.data;
        }
      } catch (error) {}
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.isDelayApply) {
            let params = {
              name: this.ruleForm.name,
              idno: this.ruleForm.idNo,
              gender: this.ruleForm.gender,
              birth: this.formatDateTime("YY-MM-dd", this.ruleForm.birth),
              phone: this.ruleForm.phone,
              pwd: this.ruleForm.pwd,
              repPwd: this.ruleForm.repPwd,
            };
            // console.log(params);
            try {
              const data = await studDelayReg(params);
              if (data.res == 0) {
                this.idno = data.data.idno;
                this.dialogGoLogin = true;
              } else {
                this.$message.error(data.msg);
              }
            } catch (error) {}
          } else {
            let params = this.ruleForm;
            params.birth = this.formatDateTime("YY-MM-dd", this.ruleForm.birth);
            try {
              const data = await studReg(params);
              if (data.res == 0) {
                this.idno = data.data.idno;
                this.dialogGoLogin = true;
              } else {
                this.$message.error(data.msg);
              }
            } catch (error) {}
          }
        } else {
          this.isShowBirthError = false;
          this.isShowPwdError = false;
          this.isShowPhoneError = false;
          return false;
        }
      });
    },
    changeRegType() {
      const idNo = [
        { required: true, message: "请输入身份证号", trigger: "blur" },
        {
          pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
          message: "您的身份证格式不正确",
        },
      ];
      if (this.ruleForm.ogState == "1") {
        if (this.ruleForm.regType == "reg10") {
          this.idCheck = false;
          this.rules.idNo = [];
          this.rules.idNo.push(idNo[0]);
        } else {
          this.idCheck = true;
          this.rules.idNo = idNo;
        }
      }
    },
    changeNoOrig() {
      if (this.ruleForm.ogState == "0") {
        this.idCheck = false;
        this.ruleForm.idNo = "";
        this.ruleForm.birth = "";
        this.ruleForm.gender = "";
        if (
          this.ruleForm.regType == "reg10" ||
          this.ruleForm.regType == "reg9"
        ) {
          this.ruleForm.regType = "";
        }
      } else {
        this.idCheck = true;
      }
    },
    //回填出生年月和性别
    idChange() {
      if (this.ruleForm.regType != "reg10") {
        if (this.ruleForm.idNo == "") {
          return false;
        }
        this.ruleForm.gender = this.formatId(this.ruleForm.idNo, 2);
        this.ruleForm.birth = this.formatId(this.ruleForm.idNo, 1);
      }
    },
    //解析身份证号码中的出生年月和性别
    formatId(card, num) {
      return getAnalysisIdCard(card, num);
    },
    formatDateTime(fmt, mydate) {
      return formatDate(fmt, mydate);
    },
    //获取符合报名条件的出生日期
    async getBirthDate(key) {
      try {
        const data = await getSysPara(key);
        if (data.res == 0) {
          const birthBe =
            data.data[0].value.substring(0, 4) +
            "-" +
            data.data[0].value.substring(4, 6) +
            "-" +
            data.data[0].value.substring(6, 8);
          if (key == "BirthBegin") {
            this.ruleForm.BirthBegin = birthBe;
          } else if (key == "BirthEnd") {
            this.ruleForm.BirthEnd = birthBe;
          }
        }
      } catch (error) {}
    },

    goLogin() {
      this.$router.push({ path: "/zmkm" });
    },
    handleGoLogin() {
      this.dialogGoLogin = false;
      this.$router.push({ path: "/zmkm" });
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          localDb.set("emptyEnter", data.data);
          if (data.data.isMt != "0") {
            this.$router.push({ path: "/empty" });
          }
        }
      } catch (error) {}
    },
    showPhoneError() {
      this.$refs["ruleForm"].validateField("phone", (phoneError) => {
        if (phoneError) {
          this.isShowPhoneError = false;
        } else {
          this.isShowPhoneError = true;
        }
      });
    },
    showPwdError() {
      this.$refs["ruleForm"].validateField("pwd", (pwdError) => {
        if (pwdError) {
          this.isShowPwdError = false;
        } else {
          this.isShowPwdError = true;
        }
      });
    },
    showBirthError() {
      this.$refs["ruleForm"].validateField("birth", (birthError) => {
        if (birthError) {
          this.isShowBirthError = false;
        } else {
          this.isShowBirthError = true;
        }
      });
    },
  },
  created() {
    this.getSysZt();
    localDb.clear("1", "TOKEN");
    localDb.clear("1", "user");
    localDb.clear("1", "stuList");
  },
  mounted() {
    this.getBirthDate("BirthBegin");
    this.getBirthDate("BirthEnd");
    this.getRegType("regType1");
  },
  computed: {
    isDelayApply() {
      return this.$store.state.isDelayApply;
      // return localDb.get("delayApply");
    },
    regTypesArray() {
      let arr = this.regTypesArr;
      if (this.ruleForm.ogState == "0") {
        return arr.slice(0, 2);
      } else {
        return arr;
      }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.register_index {
  min-height: 100vh;
  // height: 100%;
  overflow: hidden;
  // background-color: #edf4fa;
}
.content {
  .register-box {
    width: 1200px;
    margin: 30px auto;
    border-radius: 4px;
    background-color: #fff;
    padding: 30px 60px;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
    .hd {
      padding-bottom: 22px;
      border-bottom: 2px $bsC solid;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        line-height: 21px;
        font-size: 24px;
        color: #0195ff;
        // font-weight: normal;
        font-family: "MicrosoftYaHei-Bold";
        span {
          font-weight: normal;
          font-size: 16px;
          color: #222;
        }
      }
      .login-hd-fr {
        color: #222;
        // padding-top: 18px;
        font-size: 16px;
        a {
          color: $bsC;
          text-decoration: none;
        }
      }
    }
    .bd {
      padding-top: 30px;
      .register {
        // width: 50%;
        // margin: 0 auto;
        .demo-ruleForm {
          .el-form-item {
            width: 45%;
            &.itemtel {
              margin-bottom: 12px !important;
            }
            .el-form-tips {
              margin-left: 5px;
              line-height: 12px;
            }
            .el-form-infos {
              font-size: 12px;
              padding-top: 0;
              line-height: 20px;
            }
            &.delayname {
              margin-bottom: 12px;
            }
            &:nth-child(1),
            &:nth-child(2) {
              width: 100%;
              // margin-bottom: 35px;
            }
            .el-checkbox {
              margin-left: -85px;
              margin-top: 13px;
            }
            .reg-row {
              margin-bottom: 10px;
              &:last-child {
                margin-bottom: 0;
                .el-form-infos {
                  padding-bottom: 0;
                }
              }
            }
            /deep/ .el-form-item__error {
              padding-left: 15px;
              padding-top: 0;
            }
          }
          .submit_btn {
            margin: 30px auto;
            margin-bottom: 0;
            /deep/ .el-form-item__content {
              width: 350px;
              height: 42px;
              margin-left: 68px !important;
            }
            .el-button {
              height: 42px;
              font-size: 16px;
            }
          }
          .el-row {
            .el-col {
              .el-form-item {
                width: 90%;
                margin-bottom: 0;
              }
              &:last-child {
                display: flex;
                flex-direction: row-reverse;
              }
            }
          }
          .promise {
            width: 100%;
            // height: 160px;
            background-color: #f9f9f9;
            padding: 20px 0;
            border-radius: 4px;
            margin-top: 30px;
            .el-form-item {
              margin-bottom: 0;
            }
            /deep/ .el-form-item__label {
              font-weight: 700;
              color: #222;
            }
            /deep/ .el-form-item__content {
              margin-left: 130px;
              width: 100%;
              margin-top: 10px;
              // .el-checkbox__input.is-checked + .el-checkbox__label {
              //   color: #333;
              // }
            }
            .el-form-infos {
              font-size: 14px;
              color: #222;
            }
            .el-checkbox {
              /deep/ .el-checkbox__input {
                margin-top: -2px;
              }
            }
            .privacy {
              color: #0195ff;
              cursor: pointer;
              text-decoration: none;
            }
          }
        }
        .el-radio {
          color: $ftc3;
        }
      }
    }
  }
}
.provite_policy {
  z-index: 1000;
  width: 560px;
  // height: 384px;
  padding-bottom: 30px;
  border: 1px solid ccc;
  border-radius: 4px;
  background-color: #fff;
  position: fixed;
  left: 50%;
  right: 0;
  // top: 210px;
  top: 30%;
  transform: translateX(-50%);
  .title {
    height: 40px;
    background-color: #fafafa;
    padding-left: 20px;
    border-radius: 4px;
    border-bottom: 1px solid #ccc;
    // background-color: #0091ff;
    h3 {
      font-size: 16px;
      font-weight: normal;
      line-height: 40px;
    }
  }
  .provite_content {
    .image {
      width: 142px;
      height: 86px;
      margin: 30px auto 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      width: 440px;
      height: 90px;
      margin: auto;
      font-size: 16px;
      color: #222;
      text-align: justify;
      .span {
        color: #0195ff;
        cursor: pointer;
        text-decoration: none;
      }
    }
    .agree_btn {
      margin-top: 60px;
      text-align: center;
      .el-button {
        width: 84px;
        height: 36px;
        // line-height: 36px;
        padding: 0;
        font-size: 16px;
        &:first-child {
          color: #333;
          &:hover {
            color: #0195ff;
          }
          &:focus {
            color: #222;
            background-color: #fff;
            border-color: #dcdfe6;
          }
        }
      }
    }
  }
  .goLogin_content {
    padding: 0 20px;
    .text {
      display: flex;
      // justify-content: center;
      padding: 18px 0 20px;
      i {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        color: #fff;
        background-color: #52c41a;
        margin-right: 20px;
        margin-top: 2px;
      }
      p {
        width: 310px;
        font-weight: 700;
        font-size: 16px;
      }
    }
    .agree_btn {
      text-align: right;
      .el-button {
        height: 32px;
        font-size: 14px;
      }
    }
  }
}

.wid {
  padding-bottom: 20px;
  width: 410px;
}
.el-message-box__wrapper {
  .el-message-box {
    width: 340px;
    .el-message-box__content {
      padding: 10px 15px;
    }
    .el-message-box__btns {
      padding: 20px 15px 5px;
      .el-button {
        &:first-child {
          color: #fff;
          background-color: #0195ff;
        }
        &:last-child {
          background-color: #fff;
          color: #000;
          border-color: #ccc;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.title-top {
  .el-form-item__content {
    .el-form-item__error {
      padding-left: 22px !important;
    }
  }
  .el-form-item__label {
    margin-top: -13px;
  }
}

.code_mask {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.5;
}
</style>
